import React,{Component} from 'react'
import { Form,Icon, Input, Button,message } from 'antd'
import {Redirect} from 'react-router-dom'
import './login.less'

import memoryUtil from '../../utils/memoryUtil'
import storageUtil from '../../utils/storageUtil'
import logo from '../../assets/images/logo.png'
import {reqLogin} from "../../api"


/*
*  登录组件
* */
 class Login extends Component{
     handleSubmit = (event) => {

         // 阻止事件的默认行为
         event.preventDefault()

         this.props.form.validateFields(async (err, values) => {
             if (!err) {
                 const {name,password}=values
                 const result = await reqLogin(name, password)
                 if (result.status===0) {
                   // 登录成功
                   memoryUtil.user=result.data
                   storageUtil.saveUser(result.data)
                   message.success('登录成功')
                 // 跳转到管理界面(不需要回退到登录)
                 this.props.history.replace('/')
                 }else {
                   message.error('登录失败')
                 }
             }else {
                 console.log('校验失败')
             }
         });
     }
   /*
   *  自定义验证函数
   * */
     validatorPwd=(rule, value, callback)=>{
         // console.log('validatorPwd',rule,value)
         if (!value){
             callback('密码不能为空')
         } else if (value.length<=4){
             callback('密码不能等于4')
         } else if (value.length>13){
             callback('密码不能大于12')
         }else {
             callback() // 验证通过
         }
     }

    render(){
         /* 如果用户存在直接跳到管理界面 */
         const user=memoryUtil.user;
         if (user.id) {
             return <Redirect to='/'/>
         }

        const { getFieldDecorator } = this.props.form;

        return (
            <div className="login">
                <header className="login-header">
                    <img src={logo} alt="logo"/>
                    <h1>React 后台管理系统</h1>
                </header>
                <section className="login-content">
                    <h2>用户登录</h2>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {getFieldDecorator('name', { // 配置对象：属性名是特定名称
                                // 声明式验证，直接使别人定义好的规则验证
                                rules: [
                                    {required:true,whitespace:true,message:'用户名不能为空'},
                                    {min:4,message:'用户名至少4位'},
                                    {max:12,message:'用户名不能超过12位'},
                                    {pattern:/^[a-zA-Z0-9]+$/,message:'请输入由数字英文字母组合成的账号'}
                                    ],
                                initialValue:'admin'  // 指定初始值
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="用户名"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules:[
                                    {validator:this.validatorPwd}
                                    ]
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="密码"
                                />,
                            )}
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}
/*
* 1 高阶函数
*   1). 一类是特别函数
*      a，接受函数类型参数
*      b, 返回类型是函数类型参数
*   2） 常见
*   a. 定时器，setTimeOut()/setInterval()
*   b. Promise: Promise( ()=>{} ) then (value ={},reason={})
*   c. 数组遍历相关的方法 ：forEach()/filter()/map()/reduce()/find()/findIndex()
*   d. 函数对象bind() 方法
*   e. Form.create()
*
* 2 高阶组件
*    1），本质是一个函数
*    2），接受一个组件（被包装组件），生成一个新的组件（包装组件），包装组件会向被包装组件传入特定属性
*    3），作用：扩展组件功能
*    4），高阶组件也是函数，接受一个组件函数，返回一个新的组件函数
* */
/*
* await 和async
* 1，作用？
*   简化promise对象的使用：不用then()来指定成功/失败回调函数，
*
* 2，哪里写await
*   在返回promise的表达式左侧写await：
*
*
* 3，哪里写async
*   await 所在函数(最近的)定义左侧
*
* */
/*
* 包装from组件，生成一个新的组件
* 新组件会向From传递小写from组件
* */

/**
 *1 优化：同一处理异常请求
 * 在外层包一层自己创建promise对象
 * 在请求出错时候，不redject（error），而是显示错误信息
 *
 * 2 异步得到的不是response而是response.data
 * 在请求成功resolve时，resolve（response.data）
 */

const  WrapLoing=Form.create()(Login)
export  default  WrapLoing